<div class="panel" id="bodyPanel" style="padding: 60px 0">
    <div class="restaurantInfo" style="display: none;">
        <ul class="infos">
            <li style="background-image: url('/statics/imgs/menu.png')">
                <span>暂无通知</span>
            </li>
            <li style="background-image: url('/statics/imgs/position.png')">
                <span>大厦流程</span>
            </li>
            <li style="background-image: url('/statics/imgs/phone.png')">
                <div style="width: 65%; float: left;">010-66579932
                </div>
                <div style="text-align: right">
                    <a href="tel:010-66579932">
                        <button>联系餐厅</button>
                    </a>
                </div>
            </li>
        </ul>
    </div>

    <div id="menuwrap" class="menuwrap" style="height: 100%;">
        <div id="asidewrap" class="asidewrap" style="height: 100%;overflow: auto;">
            <div class="taglist" style="" id="menuType">
                <script type="text/x-dot-template" id="menuTypeTemp">
                    {{~it:value:index}}
                    <div id="tag{{=value}}" class="j-tag tag {{?index==0}} focus{{?}}" data-key="{{=value}}">
                        <div class="tag-inner"><span class="tag-text">{{=value}}</span></div>
                    </div>
                    {{~}}
                </script>
                <div class="cart-placeholder"></div>
            </div>
        </div>
        <div id="mainwrap" class="mainwrap" style="height: 100%;overflow: auto;">
            <div class="foodlistwrap"
                 style="">
                <div data-tagid="100" class="j-foodlist foodlist" id="orderDetail">
                    <script type="text/x-dot-template" id="goodsList">
                        <h3 class="foodlist-label">销量排行</h3>
                        <ul class="good-list" >

                            {{~it :value:index}}
                            <li id="li_{{=value.menuId}}">
                                <img src="/upload/{{=value.imageFile}}"
                                     style="/*background: url('/statics/imgs/img_background.png') no-repeat  center 50%;background-size: 80% */">
                                <p class="g-title">{{=value.itemName}}</p>
                                <p class="g-desc">{{=value.itemDescription}}</p>
                                <p class="g-price" style="margin-top: 42px">
                                    ￥{{=value.itemPrice}}/{{=value.itemUnit}}</p>
                                <div class="num">
                                    <div class="quantity-form" gid="{{=value.menuId}}">
                                        <a class="decrement" href="javascript:void(0);" style="display: none"
                                           id="decrement_{{=value.menuId}}" gid="-"><img
                                                src="/statics/imgs/reduce.png?v=${params.ver}"></a>
                                        <a class="increment" name="incrementBtn" href="javascript:void(0);" gid="+"
                                           id="increment_{{=value.menuId}}">
                                            <img src="/statics/imgs/add.png?v=${params.ver}"
                                                 id="add_img_{{=value.menuId}}"></a>
                                        <img src="/statics/imgs/goodsNumBg.png?v=${params.ver}" class="itxtImg"
                                             id="itxtImg_{{=value.menuId}}">
                                        <input type="text" value="0" class="itxt" name="{{=value.itemPrice}}"
                                               autocomplete="off" id="val_{{=value.menuId}}" data-isCartGoods="0"
                                               data-menuName="{{=value.itemName}}" style="display: none"
                                               readonly="readonly">
                                    </div>
                                </div>
                            </li>
                            {{~}}
                        </ul>
                    </script>
                </div>
                <div class="cart-placeholder"></div>
            </div>
        </div>
    </div>
    <div class="j-mask mask" style="display: none;"></div>
</div>
<div class="ypfood-head">
    <div class="back-div" onClick="javascript :history.back(-1);">
        <img src="/statics/imgs/head-back.png?v=${params.ver}">
    </div>
    <div><span class="title-span">A栋B1餐厅</span></div>
</div>
<div id="cartListPanel" class="pop-panel">
    <%--<div plugin="dot" id="cartListPanel" class="pop-panel" onclick="hideChangeZqPanel()">--%>
    <div class="pop-panel-shadow" style="filter:alpha(opacity:30);opacity:0.3;" onclick="hideCartPanel()"></div>
    <div id="cartListPanelContent" class="payway-panel pop-panel-content" style="display: none">
        <div class="cart-header">
            <div style=" width: 100%; float: left; ">购物车</div>
            <%--<div style="width: 47%; float: right; text-align: right;" onclick="clearCart()">清空</div>--%>
        </div>
        <div class="goods-list">
            <ul id="cart-goods-list-ul">
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    <div class="cart" onclick="openCart()">
        <p id="cartGoodsNum" style="display: none;">0</p>
    </div>
    <div class="monye">￥<span id="amount">0</span></div>
    <div class="subOrder disabled" onclick="subOrder()">
        <span class="title-span ">预定</span>
    </div>
</div>
<script type="text/javascript" src="/statics/js/xback.js"></script>
<script src="/statics/js/jquery.touchSwipe.min.js"></script>
<script>
    $(function () {
        //所有声明的变量
        var initTop;//这个变量是内容的初始高度，也就是最顶端，根据屏幕高度*10%得来的，看CSS对这个的设定
        var goTop;//每次点击完左侧按钮，右侧内容将要去的top值
        var currentTop;//右侧内容当前的top值
        var currentTop_left;//左侧内容当前的top值
        var _currentID = 0;//当前ID

        //开始执行的函数
        initData();//初始化数据
        initEvent(); //屏蔽掉系统默认的滚动事件
        swipEvent();//拖动屏蔽
        move()
        //所有数据的初始化都放这里
        function initData() {
            initTop = 0;
            currentTop = initTop;
            currentTop_left = 0;
        }

        function initEvent() {
            document.ontouchmove = function (e) {
                e.preventDefault();
            }
        }


        /*****初次写click事件与移动设备滑动事件冲突
         * 用move函数中touch事件代替点击事件
         *
         * ****/

        //点击左侧菜系按钮 改成touchend
        /***          $(".tt").click(function(e){
                //console.log(e.currentTarget.id);//获取到当前被点击的按钮的ID
                //获取当前被点击按钮的ID末尾数字，用来与内容做关联
                var id=e.currentTarget.id.slice(2);
                //根据点击的是哪个按钮，滚动右侧的内容
                clickMove(id);
                showBtn(id);
            });

         ***/


        function move() {
            var x, y, X, Y, moved;
            var list = $(".tt")
            for (var i = 0; i < list.length; i++) {
                list[i].addEventListener('touchstart', function (event) {
                    moved = false; // moved用于判断是否滑动
                    // x = event.targetTouches[0].screenX ;
                    //  y = event.targetTouches[0].screenY ;

                });
                list[i].addEventListener('touchmove', function (event) {
                    if (moved) return
                    // X = event.targetTouches[0].screenX ;
                    //  Y = event.targetTouches[0].screenY ;
                    if (X - x != 0 || Y - y != 0) moved = true
                });
                list[i].addEventListener('touchend', function (event) {
                    if (!moved) {
                        var id = event.currentTarget.id.slice(2);
                        //根据点击的是哪个按钮，滚动右侧的内容
                        clickMove(id);//改变左侧按钮样式
                        showBtn(id);//操作右侧栏联动
                    }
                })

            }
        }

        //左侧按钮状态的变化,点击或者拖动到相应状态，按钮状态变化控制$ID:按钮ID
        function showBtn($ID) {
            //先全部恢复到未选中状态
            for (var i = 0; i < $(".tt").length; i++) {
                $("#tt" + i.toString()).removeClass($("#tt" + i.toString()).attr("class"));
                $("#tt" + i.toString()).addClass("tt tt_unclick");
            }
            //再让当前被点击按钮变为选中状态
            $("#tt" + $ID.toString()).removeClass("tt_click");
            $("#tt" + $ID.toString()).addClass("tt tt_click");

        }


        //点击移动右侧内容 传进来的参数是点击的按钮ID
        function clickMove($ID) {
            //这里是逻辑重点，就是点击之后要去的top=对应菜系模块的top的负数 (为了保证最后一个不漏底，要保证右侧内容最后一个是底对齐，所以用Math取一个最大值)
            goTop = Math.max(-Number($("#content" + ($ID)).position().top), -($("#right_content").height() - window.innerHeight * 0.7));
            $("#right_content").animate({top: goTop.toString() + "px"}, 500, function () {
                currentTop = Number($("#right_content").position().top);
            });
        }


        //以下是拖动事件
        function swipEvent() {
            $("#right").swipe({
                swipeStatus: function (event, phase, direction, distance, duration, fingerCount) {
                    // console.log("你用"+fingerCou nt+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " +"你在"+phase+"中");
                    //fingerCount 几个手
                    //duration 速度
                    //direction 方向 up left right down 当start时候为null 点击没有移动的时候默认为left
                    //distance 距离
                    //phase 事件 start move cancel

                    switch (phase) {
                        case "start":
                            break;
                        case "move":
                            if (direction == "up") {
                                //向上滑动屏幕 distance为滑动了多少
                                $("#right_content").stop();//停止正在进行中的动画
                                $("#right_content").css("top", (currentTop - distance).toString() + "px");
                            }
                            if (direction == "down") {
                                //向下滑动屏幕 distance为滑动了多少
                                $("#right_content").stop();//停止正在进行中的动画
                                $("#right_content").css("top", (currentTop + distance).toString() + "px");
                            }
                            break;
                        case "end":
                            if (direction == "up") {
                                //向上滑动屏幕 distance为滑动了多少
                                $("#right_content").stop();//停止正在进行中的动画
                                currentTop = Number($("#right_content").position().top);
                                $("#right_content").animate({top: (Math.max((currentTop - distance - 300), (-($("#right_content").height() - window.innerHeight * 0.7)))).toString() + "px"}, 500, function () {
                                    currentTop = Number($("#right_content").position().top);
                                    moveShowBtn();
                                });
                            }
                            if (direction == "down") {
                                //向下滑动屏幕 distance为滑动了多少
                                $("#right_content").stop();//停止正在进行中的动画
                                $("#right_content").animate({top: (Math.min((currentTop + distance + 300), 0)).toString() + "px"}, 500, function () {
                                    currentTop = Number($("#right_content").position().top);
                                    //当前模块的左侧按钮变为选中状态
                                    moveShowBtn();
                                });
                            }
                            break;
                    }
                }, threshold: 5
            });

            $("#left_content").swipe({
                swipeStatus: function (event, phase, direction, distance, duration, fingerCount) {
                    // console.log("你用"+fingerCou nt+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " +"你在"+phase+"中");
                    //fingerCount 几个手
                    //duration 速度
                    //direction 方向 up left right down 当start时候为null 点击没有移动的时候默认为left
                    //distance 距离
                    //phase 事件 start move cancel

                    switch (phase) {
                        case "start":
                            break;
                        case "move":
                            if (direction == "up") {
                                //向上滑动屏幕 distance为滑动了多少
                                $("#left_content").stop();
                                ;//停止正在进行中的动画
                                $("#left_content").css("top", (currentTop_left - distance).toString() + "px");
                            }
                            if (direction == "down") {
                                //$("#left_content").unbind("touchend")
                                //向下滑动屏幕 distance为滑动了多少
                                $("#left_content").stop();//停止正在进行中的动画
                                $("#left_content").css("top", (currentTop_left + distance).toString() + "px");
                            }
                            break;
                        case "end":
                            if (direction == "up") {
                                //向上滑动屏幕 distance为滑动了多少
                                $("#left_content").stop();//停止正在进行中的动画
                                currentTop_left = Number($("#left_content").position().top);
                                $("#left_content").animate({top: (Math.max((currentTop_left - distance - 300), (-($("#left_content").height() - window.innerHeight * 0.7)))).toString() + "px"}, 500, function () {
                                    currentTop_left = Number($("#left_content").position().top);
                                });
                            }
                            if (direction == "down") {
                                //向下滑动屏幕 distance为滑动了多少
                                $("#left_content").stop();//停止正在进行中的动画
                                $("#left_content").animate({top: (Math.min((currentTop_left + distance + 300), 0)).toString() + "px"}, 500, function () {
                                    currentTop_left = Number($("#left_content").position().top);
                                });
                            }
                            break;
                    }
                }, threshold: 5
            });
        }

        //根据右侧的位置判断左侧按钮哪个应该为选中状态
        function moveShowBtn() {
            var list = $(".contentMK");
            for (var i = 0; i < list.length; i++) {
                var aa = $(list[i]).position().top;
                var bb = $(list[i]).height();
                var id = Number(list[i].id.slice(7));
                var cc = $("#content" + id).height();
                if (-currentTop >= aa && -currentTop <= (aa + bb)) {
                    _currentID = id;
                    showBtn(_currentID);
                }

            }
        }
    });
</script>
<script>
    $(function () {
        $("#bodyPanel").css("height", (window.innerHeight) + "px");
    })
    var isPopCartPanel = false;
    function openCart() {
        if ($(".subOrder").hasClass("disabled")) {
            return;
        }
        if (isPopCartPanel) {
            hideCartPanel();
        } else {
            popCartPanel();
        }
    }
    function popCartPanel() {
        $("#cartListPanel").css("display", "block");
        $("#cartListPanelContent").slideToggle('100', function () {
            //if(document.getElementById("cartListPanelContent").offsetHeight == document.getElementById("cartListPanelContent").scrollHeight){
            //}
        });
        $("#cartListPanelContent").css("display", $("#cartListPanel").css("display"));
        isPopCartPanel = true;
        $("body").css("overflow", "hidden");
    }
    function hideCartPanel() {
        isPopCartPanel = false;
        $("#cartListPanelContent").slideToggle('100', function () {
            $("#cartListPanel").css("display", "none");
            $("#cartListPanelContent").css("display", $("#cartListPanel").css("display"));
            $("body").css("overflow", "visible");
        });
    }
    function subOrder() {
        if ($(".subOrder").hasClass("disabled")) {
            return;
        }
        var goods = $("input[type='text'][data-isCartGoods='1']");
        var select = "";
        for (var i = 0; i < goods.length; i++) {
            select += $(goods[i]).parent().attr("gid") + "@@" + $(goods[i]).val() + ",";
        }
        json("/order/addToCart.jspa", {select: select}, function (data) {
            if (data.code == 0) {
                window.location.href = "/order/orderInfo.jspa";
            }
        });
    }

    var _data = new Array();
    var page = 0;
    var pageNum = 15;

    function setCartGoodsNum(num) {
        if (num != 0) {
            $("#cartGoodsNum").css("display", "block");
            $("#cartGoodsNum").html(num);
        }
        else {
            $("#cartGoodsNum").css("display", "none");
            $("#cartGoodsNum").html(num);
        }
    }
    function resetAmount() {
        var goods = $("input[type='text'][data-isCartGoods='1']");
        var money = 0;
        for (var i = 0; i < goods.length; i++) {
            var m = parseFloat($(goods[i]).attr("name"));
            money += parseInt($(goods[i]).val()) * m;
        }
        $("#amount").html(money.toFixed(2));
        if (money > 0) {
            $(".subOrder").removeClass("disabled");
        } else {
            if (!$(".subOrder").hasClass("disabled")) {
                $(".subOrder").addClass("disabled");
            }
        }
    }

    var goodsListTemp = $("#goodsList").html();
    var menuTypeTemp = $("#menuTypeTemp").html();
    function initdata() {
        json("/menu/menuTypeList.jspx", {}, function (data) {
            $("#menuType").html(doT.template(menuTypeTemp)(data));
        });
        json("/menu/menus.jspx", {}, function (data) {
            $("#orderDetail").html(doT.template(goodsListTemp)(data));
            /*绑定查看商品详情页面*/
            /*$("#orderDetail li >img ,#orderDetail li > p").bind("click", function (obj) {
             var goodsId = parseInt($(this).parent().attr("id").substr(3));
             if (token != "") {
             doAdds("/product/productInfo.jspx?goodsId=" + goodsId + "&cat=" + cat, true);
             } else {
             window.location.href = "/product/productInfo.jspx?goodsId=" + goodsId + "&cat=" + cat;
             }
             });*/
            /*绑定数量加减*/
            $(".quantity-form a").bind("click", function () {
                var $p = $("input", $(this).parent());
                var v = parseInt($p.val());
                var gid = $(this).parent().attr("gid");
                if ($(this).attr("gid") == '-') {
                    v -= 1;
                    if (v == 0) {
                        removeChildLi(gid);
                        $("#val_" + gid).css('display', 'none');
                        $("#decrement_" + gid).css('display', 'none');
                        $("#itxtImg_" + gid).css('display', 'none');
                        $("#add_img_" + gid).attr('src', "/statics/imgs/add.png?v=${params.ver}");
                    }
                    setCartGoodsNum(parseInt($("#cartGoodsNum").html()) - 1);
                } else {
                    var s = v;
                    v += 1;
                    $p.attr("data-isCartGoods", '1')
                    if (v == 1) {
                        appendChildLi(gid, $p.attr("name"), $p.attr("data-menuName"));
                        $("#decrement_" + gid).css('display', 'block');
                        $("#itxtImg_" + gid).css('display', 'block');
                        $("#val_" + gid).css('display', 'block');
                        $("#add_img_" + gid).attr('src', "/statics/imgs/add_new.png?v=${params.ver}");
                    }
                    if (v > s) {
                        setCartGoodsNum(parseInt($("#cartGoodsNum").html()) + 1);
                    }
                }
                $(".val_" + gid).val(v).attr("value", v);
                $p.val(v);
                $p.attr("value", v);
                resetAmount();
            });

            json("/order/cartInfo.jspa", {}, function (data) {
                if (data.code == 0) {
                    var goods = data.menus;
                    for (var i = 0; i < goods.length; i++) {
                        $("#val_" + goods[i].menuId).val(goods[i].num).attr("value", goods[i].num);
                        $("#val_" + goods[i].menuId).attr("data-isCartGoods", '1');
                        if ($("#val_" + goods[i].menuId).is(":visible") == false) {
                            $("#decrement_" + goods[i].menuId).css('display', 'block');
                            $("#itxtImg_" + goods[i].menuId).css('display', 'block');
                            $("#val_" + goods[i].menuId).css('display', 'block');
                            $("#add_img_" + goods[i].menuId).attr('src', "/statics/imgs/add_new.png");
                        }
                    }
                }
                resetAmount();
            });
        });
    }
    function clearCart() {

    }
    function removeChildLi(menuId) {
        $(".li_" + menuId).remove();
    }
    function appendChildLi(menuId, itemPrice, menuName) {
        $("#cart-goods-list-ul").append(
                '<li class="li_' + menuId + '">' +
                '<div class="g-tit">' + menuName + '</div>' +
                '<div class="g-pri">￥' + itemPrice + '</div>' +
                '<div class="g-num">' +
                '<div class="quantity-form" gid="' + menuId + '">' +
                '<a class="decrement decrement_' + menuId + '" href="javascript:void(0);" gid="-" onclick="delNum(\'' + menuId + '\')">' +
                '<img src="/statics/imgs/reduce.png?v=${params.ver}">' +
                '</a>' +
                '<a class="increment" name="incrementBtn" href="javascript:void(0);" gid="+" onclick="addNum(\'' + menuId + '\')">' +
                '<img src="/statics/imgs/add_new.png?v=${params.ver}" class="add_img_' + menuId + '">' +
                '</a>' +
                '<img src="/statics/imgs/goodsNumBg.png?v=${params.ver}" class="itxtImg itxtImg_' + menuId + '" style="display: block;">' +
                '<input type="text" value="0" class="itxt val_' + menuId + '" name="' + itemPrice + '" autocomplete="off" data-isCartGoods="0" style="" readonly="readonly">' +
                '        </div>' +
                '</div></li>');
    }
    function addNum(gid) {
        $("#increment_" + gid).click();
    }
    function delNum(gid) {
        $("#decrement_" + gid).click();
    }
    /*var stop = true;
     $(window).scroll(function () {
     var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
     if ($(document).height() <= (totalheight + 110)) {
     if (stop == true) {
     stop = false;
     initdata();
     }
     }
     });*/

    initdata();
    XBack.listen(function () {
    });
</script>
